import React, { useState, useEffect } from 'react'
import { Col, Form, Input, Button, Row, Radio, Table, InputNumber, Modal, Select, Checkbox, message, } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import RenderButtom from '@/components/RenderButton'
import SearchBox from '@/components/SearchBox'
import TransTable from './components/transTable'
import ProvinceTree from './components/provinceTree'
import { formItemLayout } from '@/utils/utils'
import { connect } from 'dva'
import {
  fetchTemple,
} from '@/services/setting/trans'
import { router } from 'umi'

const columns = [
  {
    title: '运送到',
    dataIndex: 'districtNames',
    key: 'districtNames',
  },
  {
    title: '首件',
    dataIndex: 'firstAmount',
    key: 'firstAmount',
  },
  {
    title: '首费',
    dataIndex: 'firstCost',
    key: 'firstCost',
  },
  {
    title: '续件',
    dataIndex: 'addAmount',
    key: 'addAmount',
  },
  {
    title: '续费',
    dataIndex: 'addCost',
    key: 'addCost',
  },
];

const FreightTmp = props => {
  const { form, trans, } = props
  const { modalStatus, } = trans
  const { getFieldDecorator } = form
  const [data, setData] = useState([])
  const [inform, setInform] = useState({})
  
  useEffect(() => {
    init()
  }, [])

  const init = async params => {
    const res = await fetchTemple(params)
    res.code == 0 ? setData(res.data) : message.warn(res.msg)
  }

  const handleBtn = type => {
    switch (type) {
      case 1:
        return router.push('/setting/trans/freightTmpDetail')
      case 3: 
        return router.push({
          pathname: '/setting/trans/freightTmpDetail',
          query: {
            id: data[0].id
          }
        })
      default:
        break;
    }
  }
  return (
    <PageHeaderWrapper>
      <RenderButtom click={handleBtn} />
      {data.length > 0 && <Table 
        title={(cur) => (data[0].types.length > 0 && <>
          <span>{data[0].name}</span>&nbsp;&nbsp;
          <span style={{color: 'rgb(11, 137, 212)'}}>{data[0].isSpecialDelivery == 1 && '包含指定包邮信息'}</span>
        </>)}
        columns={columns}
        dataSource={data[0].types}
      />}
    </PageHeaderWrapper>
    )
}

export default connect(({trans}) => ({
  trans,
}))(Form.create()(FreightTmp))
